<template>
  <div class="container">
    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 面包屑 -->
      <el-breadcrumb
        class="crumbs"
        v-if="subjects.id && subjects.name"
        separator="/"
      >
        <el-breadcrumb-item style="color: black"
          ><el-link @click="$router.back()">学科管理</el-link>
        </el-breadcrumb-item>
        <el-breadcrumb-item>{{
          subjects.id ? subjects.name : ''
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>目录管理</el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 表单 -->
      <el-form :inline="true" :model="queryList" class="demo-form-inline">
        <el-row :gutter="24" class="theform">
          <el-col :span="14">
            <el-form-item label="目录名称">
              <el-input
                placeholder="请输入目录名称"
                v-model="queryList.directoryName"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="queryList.state" placeholder="请选择">
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" @click="resetInput">清除</el-button>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="onTableData"
                >搜索</el-button
              >
            </el-form-item>
          </el-col>
          <el-col :span="5" class="solsapn">
            <el-link
              icon="el-icon-back"
              v-if="subjects.id && subjects.name"
              @click="$router.back()"
              >返回学科</el-link
            >
            <el-button
              class="new"
              icon="el-icon-edit"
              type="success"
              size="mini"
              @click="addDialogVisible = true"
              >新增目录</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <!-- 添加数据弹框 -->
      <el-dialog
        title="新增目录"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="restDir"
        ><el-form
          ref="directorysFormRef"
          :model="directorysForm"
          label-width="80px"
          :rules="directorysFormRules"
        >
          <el-form-item label="所属学科" v-if="!subjects.id && !subjects.name">
            <el-select
              v-model="directorysForm.value"
              placeholder="请选择"
              style="width: 100%"
              prop="value"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in addFrom"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="目录名称"
            prop="directoryName"
            style="width: 100%"
          >
            <el-input
              placeholder="请输入目录名称"
              v-model="directorysForm.directoryName"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDirForm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 数据提示 -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="项目名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量"> </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link @click="userStateChanged(scope.row)">
              <span v-if="scope.row.state === 1">禁用</span>
              <span v-else>启用</span>
            </el-link>
            &nbsp;
            <el-link
              :disabled="scope.row.state === 1"
              @click="editDirectorys(scope.row)"
              >修改</el-link
            >
            &nbsp;
            <el-link
              :disabled="scope.row.state === 1"
              @click="removeById(scope.row.id)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑 -->
      <el-dialog
        title="修改目录"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="restDir"
        ><el-form
          ref="directorysFormRef"
          :model="editDirectoryList"
          label-width="80px"
        >
          <el-form-item label="所属学科" v-if="!subjects.id && !subjects.name">
            <el-select
              placeholder="请选择"
              v-model="editDirectoryList.value"
              style="width: 100%"
            >
              <el-option
                :label="item.label"
                :model="item.value"
                v-for="item in addFrom"
                :value="item.value"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" style="width: 100%">
            <el-input
              value="请输入目录名称"
              v-model="editDirectoryList.directoryName"
            ></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editDirForm">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 分页 -->
      <div class="pagination" v-if="!subjects.id && !subjects.name">
        <el-pagination
          background
          @size-change="onPageChange"
          @current-change="onPageSizeChange"
          :current-page="queryList.page"
          :total="total"
          :page-size="queryList.pagesize"
          :page-sizes="[5, 10, 20, 50]"
          layout="sizes, prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  Direct,
  deleteired,
  dataStatus,
  addDirect,
  update
} from '@/api/Management/index'

import { simple } from '@/api/hmmm/subjects'
export default {
  // 获取地址栏数据
  computed: {
    subjects() {
      return this.$route.query || null
    }
  },

  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [],
      // 查询参数对象
      // 请求的参数
      queryList: {
        page: 1,
        pagesize: 10,
        directoryName: '',
        state: null
      },
      // 总条数
      total: 0,
      // 禁用
      disabled: false,
      // 添加弹框状态
      addDialogVisible: false,
      // 表单
      directorysForm: {
        value: '',
        directoryName: ''
      },
      // 添加数据
      addFrom: [],
      // 表单验证
      directorysFormRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ]
      },
      // 编辑
      editDialogVisible: false,
      // 修改请求数据
      editDirectoryList: {
        directoryName: '',
        value: ''
      },
      infoId: ''
    }
  },
  created() {
    this.onTableData()
    this.getAddFrom()
  },
  methods: {
    // 获取数据
    async onTableData() {
      try {
        this.queryList.subjectID = this.subjects.id || null
        const { data } = await Direct(this.queryList)
        console.log(data)
        this.tableData = data.items
        this.total = data.counts
        // this.$message.success('获取信息成功')
      } catch (error) {
        this.$message.error('获取信息失败')
      }
    },
    // 输入框内容清空
    resetInput() {
      this.queryList.directoryName = ''
      this.queryList.state = null
      this.onTableData()
    },
    // 获取所属学科
    async getAddFrom() {
      try {
        const { data } = await simple()
        this.addFrom = data
      } catch (err) {
        console.log(err)
      }
    },
    // 清空表单
    restDir() {
      this.$refs.directorysFormRef.resetFields()
      this.directorysForm.value = ''
      this.directorysForm.directoryName = ''
    },
    // 添加数据
    async addDirForm() {
      try {
        if (this.subjects.id && this.subjects.name) {
          await addDirect({
            directoryName: this.directorysForm.directoryName,
            subjectID: +this.subjects.id
          })
          this.$message.success('新增目录成功')
          this.addDialogVisible = false
          this.onTableData()
        } else {
          await addDirect({
            directoryName: this.directorysForm.directoryName,
            subjectID: this.directorysForm.value
          })
          this.$message.success('新增目录成功')
          this.addDialogVisible = false
          this.onTableData()
        }
      } catch (error) {
        this.$message.error('新增目录失败')
      }
    },
    // 修改状态
    async userStateChanged(row) {
      try {
        await dataStatus({
          id: row.id,
          state: row.state === 1 ? 0 : 1
        })
        this.$message.success('操作成功')
        row.state = row.state === 1 ? 0 : 1
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 删除
    async removeById(id) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该商品, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch((err) => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已经取消删除！')
      }
      try {
        await deleteired(id)
        this.$message.success('删除成功！')
        this.onTableData()
      } catch (error) {
        this.$message.error('删除失败！')
      }
    },
    // 每页显示信息条数
    onPageSizeChange(newSize) {
      this.queryList.page = newSize
      this.onTableData()
    },
    // 进入某一页
    onPageChange(newPage) {
      this.queryList.pagesize = newPage
      this.onTableData()
    },
    // 点击修改显示弹框
    async editDirectorys(row) {
      try {
        this.editDirectoryList.value = row.subjectID
        this.infoId = row.id
        this.editDirectoryList.directoryName = row.directoryName
        this.editDialogVisible = true
      } catch (err) {
        this.$message.error('获取数据失败')
      }
    },
    // 编辑
    async editDirForm() {
      try {
        if (this.subjects.id && this.subjects.name) {
          const { data } = await update({
            id: this.infoId,
            subjectID: +this.editDirectoryList.value,
            directoryName: this.editDirectoryList.directoryName
          })
          console.log(data)
          this.$message.success('修改数据成功')
          this.editDialogVisible = false
          this.onTableData()
        } else {
          const { data } = await update({
            id: this.infoId,
            subjectID: this.editDirectoryList.value,
            directoryName: this.editDirectoryList.directoryName
          })
          console.log(data)
          this.$message.success('修改数据成功')
          this.editDialogVisible = false
          this.onTableData()
        }
      } catch (error) {
        this.$message.error('修改数据失败')
        console.log(error)
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  margin: 15px;
  .box-card {
    .crumbs {
      margin-bottom: 15px;
    }
    .theform {
      margin-top: 15px;
      font-size: 15px !important;
    }
    .solsapn {
      float: right;
      .new {
        margin-left: 15px;
      }
    }
    .pagination {
      float: right;
      margin: 15px !important;
    }
  }
}
</style>
